<template>
	<el-card>
		<el-space>
			<el-space>
				<el-button type="primary" @click="addOrUpdateHandle(true, {})">新增</el-button>
			</el-space>
		</el-space>
		<el-table
			ref="singleTableRef"
			v-loading="state.dataListLoading"
			class="layout-table"
			:data="state.dataList"
			row-key="id"
			highlight-current-row
			:tree-props="treeProps"
			@selection-change="selectionChangeHandle"
			@current-change="handleCurrentChange"
		>
			<el-table-column prop="standardName" label="标签名称" header-align="center"> </el-table-column>
			<el-table-column label="操作" fixed="right" header-align="center" align="center" width="100">
				<template #default="scope">
					<el-icon :size="16" color="#1491FF" title="编辑" style="cursor: pointer; margin: 0 6px" @click="addOrUpdateHandle(false, scope.row)">
						<Edit />
					</el-icon>
					<el-icon :size="16" color="#fe6360" title="删除" style="cursor: pointer; margin: 0 6px" @click="deleteHandle(scope.row)">
						<Delete />
					</el-icon>
				</template>
			</el-table-column>
		</el-table>

		<!-- 新增编辑@refresh-data-list="" -->
		<baseUpdate ref="updateRecordRef" :modal-title="state.modalTitle" @refresh-data-list="getDataList"></baseUpdate>
	</el-card>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox, ElTable } from 'element-plus'

import { queryBaseListApi, baseDelApi } from '@/api/tag/base'
import baseUpdate from './components/baseUpdate.vue'

const state = reactive({
	queryForm: {
		date: '',
		unit: '',
		no: ''
	},
	pageNum: 1,
	pageSize: 10,
	total: 1,
	dataListLoading: false,
	dataList: [],
	visible: false,
	modalTitle: '',
	type: 2
})

const treeProps = reactive({
	// checkStrictly: false,
})
const getDataList = async () => {
	state.dataListLoading = true
	await queryBaseListApi(state.type).then(res => {
		// console.log(res.data)
		state.dataListLoading = false
		state.dataList = res.data
	})
	setCurrent()
}
const updateRecordRef = ref()

const reset = () => {}
interface LabelValue {
	label: string
	value: any
}
const options: LabelValue[] = [
	{
		value: 1,
		label: '基础'
	},
	{
		value: 2,
		label: '专题'
	}
]
const optionsLevel: LabelValue[] = [
	{
		value: 0,
		label: '父级'
	},
	{
		value: 1,
		label: '基础'
	},
	{
		value: 2,
		label: '通用'
	},
	{
		value: 3,
		label: '专用'
	}
]
function deepCopyWithJSON(obj: any): any {
	return JSON.parse(JSON.stringify(obj))
}
// 处理label 和 value
const labelOrValue = (name, arr) => {
	var itemValue
	arr.forEach(element => {
		if (element.label == name) {
			itemValue = element.value
		}
	})
	return itemValue
}
const addOrUpdateHandle = (isUpdate: Boolean, row: any) => {
	if (isUpdate) {
		if (currentRow.value) {
			state.modalTitle = '新增' + currentRow.value.standardName + '下级标签'
			if (Number(currentRow.value.standardLevel) == 3) {
				ElMessage.warning('该标签已到最小层级，不能再新增下级标签')
				return
			}
			var newWeight = 0
			if (currentRow.value?.children) {
				newWeight = currentRow.value?.children.length
			}
			row = {
				standardName: '',
				standardType: state.type,
				standardTypeValue: '',
				standardLevel: Number(currentRow.value.standardLevel) + 1,
				standardLevelValue: '',
				pid: currentRow.value.id,
				weight: newWeight,
				remark: ''
			}
		} else {
			state.modalTitle = '新增-父级'
			row = {
				standardName: '',
				standardType: state.type,
				standardTypeValue: '',
				standardLevel: 0,
				standardLevelValue: '',
				pid: 0,
				weight: 0,
				remark: ''
			}
		}
		state.visible = true
		updateRecordRef.value.init(isUpdate, row)
	} else {
		state.modalTitle = '编辑'
		var newRow = deepCopyWithJSON(row)
		if (!isUpdate) {
			newRow['standardType'] = Number(row['standardType'])
			newRow['standardLevel'] = Number(row['standardLevel'])
		}
		state.visible = true
		updateRecordRef.value.init(isUpdate, newRow)
	}
	// console.log("编辑", row)
	// updateRecordRef.value.init(isUpdate, row)
}
const delMethods = async (row: any) => {
	var params = {
		id: row.id
	}
	await baseDelApi(params).then(res => {
		ElMessage.success({
			message: '操作成功',
			duration: 500
		})
	})
	getDataList()
}
const deleteHandle = (row: any) => {
	ElMessageBox.confirm('是否删除?', '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning'
	})
		.then(() => {
			delMethods(row)
		})
		.catch(() => {
			ElMessage({
				type: 'info',
				message: '删除失败'
			})
		})
}
const currentRow = ref()
const singleTableRef = ref<InstanceType<typeof ElTable>>()
const handleCurrentChange = val => {
	currentRow.value = val
}
const setCurrent = row => {
	singleTableRef.value!.setCurrentRow(row)
}
const selectionChangeHandle = () => {}
const sizeChangeHandle = () => {}
const currentChangeHandle = () => {}

onMounted(() => {
	getDataList()
})
</script>

<style scoped>
.base-add {
	text-align: right;
	margin-bottom: 10px;
}
</style>
